WebCodecs വീഡിയോഫ്രെയിം പ്ലെയിൻ: വീഡിയോ ഫ്രെയിം ഡാറ്റാ ആക്‌സസ്സിലേക്കുള്ള ഒരു ആഴത്തിലുള്ള പഠനം

വെബ് അധിഷ്ഠിത മീഡിയ പ്രോസസ്സിംഗിൽ ഒരു വലിയ മാറ്റമാണ് WebCodecs പ്രതിനിധീകരിക്കുന്നത്. ഇത് മീഡിയയുടെ അടിസ്ഥാന ഘടകങ്ങളിലേക്ക് ലോ-ലെവൽ ആക്‌സസ് നൽകുന്നു, അതുവഴി ഡെവലപ്പർമാർക്ക് ബ്രൗസറിൽ നേരിട്ട് സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ സാധിക്കുന്നു. WebCodecs-ന്റെ ഏറ്റവും ശക്തമായ സവിശേഷതകളിലൊന്ന് VideoFrame ഒബ്ജക്റ്റാണ്, അതിനുള്ളിൽ വീഡിയോ ഫ്രെയിമുകളുടെ റോ പിക്സൽ ഡാറ്റ വെളിപ്പെടുത്തുന്ന VideoFrame പ്ലെയിനുകളും. ഈ ലേഖനം നൂതന വീഡിയോ കൈകാര്യം ചെയ്യുന്നതിനായി VideoFrame പ്ലെയിനുകൾ മനസ്സിലാക്കുന്നതിനും ഉപയോഗിക്കുന്നതിനും ഒരു സമഗ്രമായ വഴികാട്ടി നൽകുന്നു.

VideoFrame ഒബ്ജക്റ്റിനെ മനസ്സിലാക്കാം

പ്ലെയിനുകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, നമുക്ക് VideoFrame ഒബ്ജക്റ്റിനെക്കുറിച്ച് ഒന്ന് ചുരുക്കിപ്പറയാം. ഒരു VideoFrame വീഡിയോയുടെ ഒരൊറ്റ ഫ്രെയിമിനെ പ്രതിനിധീകരിക്കുന്നു. ഇത് ഡീകോഡ് ചെയ്ത (അല്ലെങ്കിൽ എൻകോഡ് ചെയ്ത) വീഡിയോ ഡാറ്റയും, ടൈംസ്റ്റാമ്പ്, ദൈർഘ്യം, ഫോർമാറ്റ് വിവരങ്ങൾ പോലുള്ള അനുബന്ധ മെറ്റാഡാറ്റയും ഉൾക്കൊള്ളുന്നു. VideoFrame API ഇനിപ്പറയുന്നവയ്ക്കുള്ള രീതികൾ വാഗ്ദാനം ചെയ്യുന്നു:

• പിക്സൽ ഡാറ്റ വായിക്കൽ: ഇവിടെയാണ് പ്ലെയിനുകളുടെ പ്രസക്തി.
• ഫ്രെയിമുകൾ പകർത്തൽ: നിലവിലുള്ള VideoFrame ഒബ്ജക്റ്റുകളിൽ നിന്ന് പുതിയവ നിർമ്മിക്കുന്നത്.
• ഫ്രെയിമുകൾ ക്ലോസ് ചെയ്യൽ: ഫ്രെയിം ഉപയോഗിക്കുന്ന അടിസ്ഥാന റിസോഴ്‌സുകളെ റിലീസ് ചെയ്യുന്നത്.

ഒരു VideoDecoder ഉപയോഗിച്ച് ഡീകോഡിംഗ് പ്രക്രിയക്കിടയിലോ, അല്ലെങ്കിൽ ഒരു കസ്റ്റം ഫ്രെയിം നിർമ്മിക്കുമ്പോഴോ ആണ് VideoFrame ഒബ്ജക്റ്റ് ഉണ്ടാകുന്നത്.

എന്താണ് VideoFrame പ്ലെയിനുകൾ?

ഒരു VideoFrame-ന്റെ പിക്സൽ ഡാറ്റ പലപ്പോഴും ഒന്നിലധികം പ്ലെയിനുകളായി ക്രമീകരിച്ചിരിക്കുന്നു, പ്രത്യേകിച്ചും YUV പോലുള്ള ഫോർമാറ്റുകളിൽ. ഓരോ പ്ലെയിനും ചിത്രത്തിന്റെ ഓരോ ഘടകത്തെ പ്രതിനിധീകരിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു YUV420 ഫോർമാറ്റിൽ മൂന്ന് പ്ലെയിനുകളുണ്ട്:

• Y (Luma): ചിത്രത്തിന്റെ പ്രകാശത്തെ (ലൂമിനൻസ്) പ്രതിനിധീകരിക്കുന്നു. ഈ പ്ലെയിനിൽ ഗ്രേസ്‌കെയിൽ വിവരങ്ങൾ അടങ്ങിയിരിക്കുന്നു.
• U (Cb): നീല-വ്യത്യാസത്തിലുള്ള ക്രോമ ഘടകത്തെ പ്രതിനിധീകരിക്കുന്നു.
• V (Cr): ചുവപ്പ്-വ്യത്യാസത്തിലുള്ള ക്രോമ ഘടകത്തെ പ്രതിനിധീകരിക്കുന്നു.

RGB ഫോർമാറ്റുകൾ ലളിതമായി തോന്നാമെങ്കിലും, ചില സാഹചര്യങ്ങളിൽ ഒന്നിലധികം പ്ലെയിനുകൾ ഉപയോഗിച്ചേക്കാം. പ്ലെയിനുകളുടെ എണ്ണവും അവയുടെ അർത്ഥവും പൂർണ്ണമായും VideoFrame-ന്റെ VideoPixelFormat-നെ ആശ്രയിച്ചിരിക്കുന്നു.

പ്ലെയിനുകൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനം, പ്രത്യേക കളർ ഘടകങ്ങളിലേക്ക് കാര്യക്ഷമമായി ആക്‌സസ് ചെയ്യാനും കൈകാര്യം ചെയ്യാനും ഇത് സഹായിക്കുന്നു എന്നതാണ്. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് നിറത്തെ (U, V പ്ലെയിനുകൾ) ബാധിക്കാതെ ലൂമിനൻസ് (Y പ്ലെയിൻ) മാത്രം ക്രമീകരിക്കാൻ സാധിക്കും.

VideoFrame പ്ലെയിനുകൾ ആക്‌സസ് ചെയ്യൽ: API

VideoFrame API പ്ലെയിൻ ഡാറ്റ ആക്‌സസ് ചെയ്യുന്നതിന് താഴെ പറയുന്ന രീതികൾ നൽകുന്നു:

• copyTo(destination, options): VideoFrame-ന്റെ ഉള്ളടക്കം ഒരു ഡെസ്റ്റിനേഷനിലേക്ക് പകർത്തുന്നു, അത് മറ്റൊരു VideoFrame, ഒരു CanvasImageBitmap, അല്ലെങ്കിൽ ഒരു ArrayBufferView ആകാം. ഏതൊക്കെ പ്ലെയിനുകളാണ് പകർത്തേണ്ടതെന്നും എങ്ങനെയെന്നും options ഒബ്ജക്റ്റ് നിയന്ത്രിക്കുന്നു. പ്ലെയിൻ ആക്‌സസ്സിനുള്ള പ്രധാന സംവിധാനം ഇതാണ്.

copyTo മെത്തേഡിലെ options ഒബ്ജക്റ്റ് വീഡിയോ ഫ്രെയിം ഡാറ്റയുടെ ലേഔട്ടും ടാർഗെറ്റും വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. പ്രധാന പ്രോപ്പർട്ടികൾ ഇവയാണ്:

• format: പകർത്തുന്ന ഡാറ്റയുടെ പിക്സൽ ഫോർമാറ്റ്. ഇത് യഥാർത്ഥ VideoFrame-ന്റെ ഫോർമാറ്റ് തന്നെയോ അല്ലെങ്കിൽ മറ്റൊരു ഫോർമാറ്റോ (ഉദാഹരണത്തിന്, YUV-ൽ നിന്ന് RGB-ലേക്ക് മാറ്റുന്നത്) ആകാം.
• codedWidth and codedHeight: വീഡിയോ ഫ്രെയിമിന്റെ പിക്സലിലുള്ള വീതിയും ഉയരവും.
• layout: മെമ്മറിയിലെ ഓരോ പ്ലെയിനിന്റെയും ലേഔട്ട് വിവരിക്കുന്ന ഒബ്ജക്റ്റുകളുടെ ഒരു അറേ. അറേയിലെ ഓരോ ഒബ്ജക്റ്റും വ്യക്തമാക്കുന്നത്:
• offset: ഡാറ്റാ ബഫറിന്റെ തുടക്കം മുതൽ പ്ലെയിനിന്റെ ഡാറ്റയുടെ ആരംഭത്തിലേക്കുള്ള ഓഫ്‌സെറ്റ്, ബൈറ്റുകളിൽ.
• stride: പ്ലെയിനിലെ ഓരോ വരിയുടെയും തുടക്കങ്ങൾക്കിടയിലുള്ള ബൈറ്റുകളുടെ എണ്ണം. പാഡിംഗ് കൈകാര്യം ചെയ്യാൻ ഇത് നിർണായകമാണ്.

ഒരു YUV420 VideoFrame ഒരു റോ ബഫറിലേക്ക് പകർത്തുന്നതിന്റെ ഒരു ഉദാഹരണം നോക്കാം:

asynс function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 has 3 planes: Y, U, and V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Important to release resources
}

വിശദീകരണം:

• ഓരോ പ്ലെയിനിന്റെയും വലുപ്പം width, height എന്നിവയെ അടിസ്ഥാനമാക്കി ഞങ്ങൾ കണക്കാക്കുന്നു. Y ഫുൾ റെസലൂഷനാണ്, അതേസമയം U, V എന്നിവ സബ്സാമ്പിൾ (4:2:0) ചെയ്തിരിക്കുന്നു.
• layout അറേ മെമ്മറി ലേഔട്ട് നിർവചിക്കുന്നു. offset ഓരോ പ്ലെയിനും ബഫറിൽ എവിടെ തുടങ്ങുന്നു എന്ന് വ്യക്തമാക്കുന്നു, കൂടാതെ stride ആ പ്ലെയിനിലെ അടുത്ത വരിയിലേക്ക് പോകാൻ എത്ര ബൈറ്റുകൾ ചാടണമെന്ന് വ്യക്തമാക്കുന്നു.
• format ഓപ്ഷൻ 'I420' ആയി സജ്ജീകരിച്ചിരിക്കുന്നു, ഇത് ഒരു സാധാരണ YUV420 ഫോർമാറ്റാണ്.
• പ്രധാനമായി, കോപ്പി ചെയ്തതിന് ശേഷം, റിസോഴ്‌സുകൾ റിലീസ് ചെയ്യാൻ videoFrame.close() വിളിക്കുന്നു.

പിക്സൽ ഫോർമാറ്റുകൾ: സാധ്യതകളുടെ ഒരു ലോകം

VideoFrame പ്ലെയിനുകളുമായി പ്രവർത്തിക്കുന്നതിന് പിക്സൽ ഫോർമാറ്റുകൾ മനസ്സിലാക്കുന്നത് അത്യാവശ്യമാണ്. വീഡിയോ ഫ്രെയിമിനുള്ളിൽ കളർ വിവരങ്ങൾ എങ്ങനെ എൻകോഡ് ചെയ്തിരിക്കുന്നു എന്ന് VideoPixelFormat നിർവചിക്കുന്നു. നിങ്ങൾ കണ്ടേക്കാവുന്ന ചില സാധാരണ പിക്സൽ ഫോർമാറ്റുകൾ ഇതാ:

• I420 (YUV420p): Y, U, V ഘടകങ്ങൾ വെവ്വേറെ പ്ലെയിനുകളിൽ സംഭരിക്കുന്ന ഒരു പ്ലാനാർ YUV ഫോർമാറ്റ്. U, V എന്നിവ തിരശ്ചീനമായും ലംബമായും 2 എന്ന ഘടകത്താൽ സബ്സാമ്പിൾ ചെയ്തിരിക്കുന്നു. ഇത് വളരെ സാധാരണവും കാര്യക്ഷമവുമായ ഒരു ഫോർമാറ്റാണ്.
• NV12 (YUV420sp): ഒരു സെമി-പ്ലാനാർ YUV ഫോർമാറ്റ്, ഇവിടെ Y ഒരു പ്ലെയിനിൽ സംഭരിക്കുന്നു, U, V ഘടകങ്ങൾ രണ്ടാമത്തെ പ്ലെയിനിൽ ഇടകലർത്തിയിരിക്കുന്നു.
• RGBA: ചുവപ്പ്, പച്ച, നീല, ആൽഫ ഘടകങ്ങൾ ഒരൊറ്റ പ്ലെയിനിൽ സംഭരിക്കുന്നു, സാധാരണയായി ഓരോ ഘടകത്തിനും 8 ബിറ്റുകൾ (ഓരോ പിക്സലിനും 32 ബിറ്റുകൾ). ഘടകങ്ങളുടെ ക്രമം വ്യത്യാസപ്പെടാം (ഉദാ. BGRA).
• RGB565: ചുവപ്പ്, പച്ച, നീല ഘടകങ്ങൾ ഒരൊറ്റ പ്ലെയിനിൽ സംഭരിക്കുന്നു. ചുവപ്പിന് 5 ബിറ്റുകൾ, പച്ചയ്ക്ക് 6 ബിറ്റുകൾ, നീലയ്ക്ക് 5 ബിറ്റുകൾ (ഓരോ പിക്സലിനും 16 ബിറ്റുകൾ).
• GRAYSCALE: ഓരോ പിക്സലിനും ഒരൊറ്റ ലുമ (പ്രകാശം) മൂല്യമുള്ള ഗ്രേസ്‌കെയിൽ ചിത്രങ്ങളെ പ്രതിനിധീകരിക്കുന്നു.

ഒരു ഫ്രെയിമിന്റെ പിക്സൽ ഫോർമാറ്റ് VideoFrame.format പ്രോപ്പർട്ടി നിങ്ങളോട് പറയും. പ്ലെയിനുകൾ ആക്‌സസ് ചെയ്യാൻ ശ്രമിക്കുന്നതിന് മുമ്പ് ഈ പ്രോപ്പർട്ടി പരിശോധിക്കുന്നത് ഉറപ്പാക്കുക. പിന്തുണയ്ക്കുന്ന ഫോർമാറ്റുകളുടെ പൂർണ്ണമായ ലിസ്റ്റിനായി നിങ്ങൾക്ക് WebCodecs സ്പെസിഫിക്കേഷൻ പരിശോധിക്കാം.

പ്രായോഗിക ഉപയോഗങ്ങൾ

VideoFrame പ്ലെയിനുകൾ ആക്‌സസ് ചെയ്യുന്നത് ബ്രൗസറിലെ നൂതന വീഡിയോ പ്രോസസ്സിംഗിനായി നിരവധി സാധ്യതകൾ തുറക്കുന്നു. ചില ഉദാഹരണങ്ങൾ ഇതാ:

1. തത്സമയ വീഡിയോ ഇഫക്റ്റുകൾ

VideoFrame-ലെ പിക്സൽ ഡാറ്റ കൈകാര്യം ചെയ്യുന്നതിലൂടെ നിങ്ങൾക്ക് തത്സമയ വീഡിയോ ഇഫക്റ്റുകൾ പ്രയോഗിക്കാൻ കഴിയും. ഉദാഹരണത്തിന്, ഒരു RGBA ഫ്രെയിമിലെ ഓരോ പിക്സലിന്റെയും R, G, B ഘടകങ്ങളുടെ ശരാശരി എടുത്ത് ഗ്രേസ്‌കെയിൽ ഫിൽട്ടർ നടപ്പിലാക്കാം, തുടർന്ന് മൂന്ന് ഘടകങ്ങളും ആ ശരാശരി മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കാം. നിങ്ങൾക്ക് ഒരു സെപിയ ടോൺ ഇഫക്റ്റ് ഉണ്ടാക്കാനോ ബ്രൈറ്റ്നസും കോൺട്രാസ്റ്റും ക്രമീകരിക്കാനോ കഴിയും.

asynс function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Red
    rgba[i + 1] = gray;   // Green
    rgba[i + 2] = gray;   // Blue
  }

  // Create a new VideoFrame from the modified data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

2. കമ്പ്യൂട്ടർ വിഷൻ ആപ്ലിക്കേഷനുകൾ

കമ്പ്യൂട്ടർ വിഷൻ ജോലികൾക്ക് ആവശ്യമായ പിക്സൽ ഡാറ്റയിലേക്ക് VideoFrame പ്ലെയിനുകൾ നേരിട്ടുള്ള ആക്‌സസ് നൽകുന്നു. ഒബ്ജക്റ്റ് കണ്ടെത്തൽ, മുഖം തിരിച്ചറിയൽ, മോഷൻ ട്രാക്കിംഗ് തുടങ്ങിയ അൽഗോരിതങ്ങൾ നടപ്പിലാക്കാൻ നിങ്ങൾക്ക് ഈ ഡാറ്റ ഉപയോഗിക്കാം. നിങ്ങളുടെ കോഡിന്റെ പ്രകടന-നിർണ്ണായക ഭാഗങ്ങൾക്കായി നിങ്ങൾക്ക് വെബ്അസംബ്ലി പ്രയോജനപ്പെടുത്താം.

ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരു കളർ VideoFrame ഗ്രേസ്‌കെയിലിലേക്ക് മാറ്റി, തുടർന്ന് ചിത്രത്തിലെ അരികുകൾ തിരിച്ചറിയാൻ ഒരു എഡ്ജ് ഡിറ്റക്ഷൻ അൽഗോരിതം (ഉദാ. സോബൽ ഓപ്പറേറ്റർ) പ്രയോഗിക്കാം. ഒബ്ജക്റ്റ് തിരിച്ചറിയലിനുള്ള ഒരു പ്രീ-പ്രോസസ്സിംഗ് ഘട്ടമായി ഇത് ഉപയോഗിക്കാം.

3. വീഡിയോ എഡിറ്റിംഗും കോമ്പോസിറ്റിംഗും

ക്രോപ്പിംഗ്, സ്കെയിലിംഗ്, റൊട്ടേഷൻ, കോമ്പോസിറ്റിംഗ് തുടങ്ങിയ വീഡിയോ എഡിറ്റിംഗ് സവിശേഷതകൾ നടപ്പിലാക്കാൻ നിങ്ങൾക്ക് VideoFrame പ്ലെയിനുകൾ ഉപയോഗിക്കാം. പിക്സൽ ഡാറ്റ നേരിട്ട് കൈകാര്യം ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് കസ്റ്റം ട്രാൻസിഷനുകളും ഇഫക്റ്റുകളും സൃഷ്ടിക്കാൻ കഴിയും.

ഉദാഹരണത്തിന്, പിക്സൽ ഡാറ്റയുടെ ഒരു ഭാഗം മാത്രം ഒരു പുതിയ VideoFrame-ലേക്ക് പകർത്തി നിങ്ങൾക്ക് ഒരു VideoFrame ക്രോപ്പ് ചെയ്യാൻ കഴിയും. അതിനനുസരിച്ച് നിങ്ങൾ layout ഓഫ്‌സെറ്റുകളും സ്ട്രൈഡുകളും ക്രമീകരിക്കേണ്ടതുണ്ട്.

4. കസ്റ്റം കോഡെക്കുകളും ട്രാൻസ്കോഡിംഗും

WebCodecs, AV1, VP9, H.264 പോലുള്ള സാധാരണ കോഡെക്കുകൾക്ക് ബിൽറ്റ്-ഇൻ പിന്തുണ നൽകുന്നുണ്ടെങ്കിലും, കസ്റ്റം കോഡെക്കുകളോ ട്രാൻസ്കോഡിംഗ് പൈപ്പ്‌ലൈനുകളോ നടപ്പിലാക്കാൻ നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കാം. എൻകോഡിംഗും ഡീകോഡിംഗും നിങ്ങൾ സ്വയം കൈകാര്യം ചെയ്യേണ്ടതുണ്ട്, എന്നാൽ റോ പിക്സൽ ഡാറ്റ ആക്‌സസ് ചെയ്യാനും കൈകാര്യം ചെയ്യാനും VideoFrame പ്ലെയിനുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. പ്രത്യേക വീഡിയോ ഫോർമാറ്റുകൾക്കോ പ്രത്യേക എൻകോഡിംഗ് ആവശ്യകതകൾക്കോ ഇത് ഉപയോഗപ്രദമാകും.

5. നൂതന അനലിറ്റിക്സ്

അടിസ്ഥാന പിക്സൽ ഡാറ്റ ആക്‌സസ് ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് വീഡിയോ ഉള്ളടക്കത്തിന്റെ ആഴത്തിലുള്ള വിശകലനം നടത്താൻ കഴിയും. ഒരു രംഗത്തിന്റെ ശരാശരി പ്രകാശം അളക്കുക, പ്രബലമായ നിറങ്ങൾ തിരിച്ചറിയുക, അല്ലെങ്കിൽ രംഗ ഉള്ളടക്കത്തിലെ മാറ്റങ്ങൾ കണ്ടെത്തുക തുടങ്ങിയ ജോലികൾ ഇതിൽ ഉൾപ്പെടുന്നു. സുരക്ഷ, നിരീക്ഷണം, അല്ലെങ്കിൽ ഉള്ളടക്ക വിശകലനം എന്നിവയ്ക്കായി നൂതന വീഡിയോ അനലിറ്റിക്സ് ആപ്ലിക്കേഷനുകൾ ഇത് പ്രവർത്തനക്ഷമമാക്കും.

ക്യാൻവാസും WebGL-ഉം ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നു

VideoFrame പ്ലെയിനുകളിലെ പിക്സൽ ഡാറ്റ നിങ്ങൾക്ക് നേരിട്ട് കൈകാര്യം ചെയ്യാൻ കഴിയുമെങ്കിലും, ഫലം സ്ക്രീനിൽ റെൻഡർ ചെയ്യേണ്ടതായി വരും. CanvasImageBitmap ഇന്റർഫേസ് VideoFrame-നും <canvas> എലമെന്റിനും ഇടയിൽ ഒരു പാലം നൽകുന്നു. നിങ്ങൾക്ക് ഒരു VideoFrame-ൽ നിന്ന് ഒരു CanvasImageBitmap സൃഷ്ടിക്കാനും തുടർന്ന് drawImage() മെത്തേഡ് ഉപയോഗിച്ച് അത് ക്യാൻവാസിൽ വരയ്ക്കാനും കഴിയും.

asynс function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Release bitmap resources
  videoFrame.close(); // Release VideoFrame resources
}

കൂടുതൽ നൂതനമായ റെൻഡറിംഗിനായി, നിങ്ങൾക്ക് WebGL ഉപയോഗിക്കാം. നിങ്ങൾക്ക് VideoFrame പ്ലെയിനുകളിൽ നിന്നുള്ള പിക്സൽ ഡാറ്റ WebGL ടെക്സ്ചറുകളിലേക്ക് അപ്‌ലോഡ് ചെയ്യാനും തുടർന്ന് ഇഫക്റ്റുകളും പരിവർത്തനങ്ങളും പ്രയോഗിക്കാൻ ഷേഡറുകൾ ഉപയോഗിക്കാനും കഴിയും. ഉയർന്ന പ്രകടനമുള്ള വീഡിയോ പ്രോസസ്സിംഗിനായി GPU പ്രയോജനപ്പെടുത്താൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

പ്രകടനവുമായി ബന്ധപ്പെട്ട പരിഗണനകൾ

റോ പിക്സൽ ഡാറ്റയുമായി പ്രവർത്തിക്കുന്നത് കമ്പ്യൂട്ടേഷണലി ഇന്റൻസീവ് ആകാം, അതിനാൽ പ്രകടന ഒപ്റ്റിമൈസേഷൻ പരിഗണിക്കേണ്ടത് നിർണായകമാണ്. ചില നുറുങ്ങുകൾ ഇതാ:

• പകർത്തുന്നത് കുറയ്ക്കുക: പിക്സൽ ഡാറ്റയുടെ അനാവശ്യമായ പകർത്തൽ ഒഴിവാക്കുക. സാധ്യമാകുമ്പോഴെല്ലാം പ്രവർത്തനങ്ങൾ ഇൻ-പ്ലേസ് നടത്താൻ ശ്രമിക്കുക.
• വെബ്അസംബ്ലി ഉപയോഗിക്കുക: നിങ്ങളുടെ കോഡിന്റെ പ്രകടന-നിർണ്ണായക ഭാഗങ്ങൾക്കായി, വെബ്അസംബ്ലി ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. കമ്പ്യൂട്ടേഷണലി ഇന്റൻസീവ് ജോലികൾക്കായി വെബ്അസംബ്ലിക്ക് നേറ്റീവ് പ്രകടനത്തിനടുത്തുള്ള പ്രകടനം നൽകാൻ കഴിയും.
• മെമ്മറി ലേഔട്ട് ഒപ്റ്റിമൈസ് ചെയ്യുക: നിങ്ങളുടെ ആപ്ലിക്കേഷനായി ശരിയായ പിക്സൽ ഫോർമാറ്റും മെമ്മറി ലേഔട്ടും തിരഞ്ഞെടുക്കുക. നിങ്ങൾക്ക് വ്യക്തിഗത വർണ്ണ ഘടകങ്ങൾ ഇടയ്ക്കിടെ ആക്‌സസ് ചെയ്യേണ്ടതില്ലെങ്കിൽ പാക്ക്ഡ് ഫോർമാറ്റുകൾ (ഉദാ. RGBA) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• OffscreenCanvas ഉപയോഗിക്കുക: പശ്ചാത്തല പ്രോസസ്സിംഗിനായി, പ്രധാന ത്രെഡ് ബ്ലോക്ക് ചെയ്യുന്നത് ഒഴിവാക്കാൻ OffscreenCanvas ഉപയോഗിക്കുക.
• നിങ്ങളുടെ കോഡ് പ്രൊഫൈൽ ചെയ്യുക: നിങ്ങളുടെ കോഡ് പ്രൊഫൈൽ ചെയ്യാനും പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്താനും ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക.

ബ്രൗസർ അനുയോജ്യത

WebCodecs-ഉം VideoFrame API-യും ക്രോം, ഫയർഫോക്സ്, സഫാരി എന്നിവയുൾപ്പെടെ മിക്ക ആധുനിക ബ്രൗസറുകളിലും പിന്തുണയ്ക്കുന്നു. എന്നിരുന്നാലും, ബ്രൗസർ പതിപ്പും ഓപ്പറേറ്റിംഗ് സിസ്റ്റവും അനുസരിച്ച് പിന്തുണയുടെ നിലവാരം വ്യത്യാസപ്പെടാം. നിങ്ങൾ ഉപയോഗിക്കുന്ന സവിശേഷതകൾ നിങ്ങളുടെ ടാർഗെറ്റ് ബ്രൗസറുകളിൽ പിന്തുണയ്ക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ MDN Web Docs പോലുള്ള സൈറ്റുകളിലെ ഏറ്റവും പുതിയ ബ്രൗസർ അനുയോജ്യത പട്ടികകൾ പരിശോധിക്കുക. ക്രോസ്-ബ്രൗസർ അനുയോജ്യതയ്ക്കായി, ഫീച്ചർ ഡിറ്റക്ഷൻ ശുപാർശ ചെയ്യുന്നു.

സാധാരണ പിഴവുകളും ട്രബിൾഷൂട്ടിംഗും

VideoFrame പ്ലെയിനുകളുമായി പ്രവർത്തിക്കുമ്പോൾ ഒഴിവാക്കേണ്ട ചില സാധാരണ പിഴവുകൾ ഇതാ:

• തെറ്റായ ലേഔട്ട്: layout അറേ പിക്സൽ ഡാറ്റയുടെ മെമ്മറി ലേഔട്ട് കൃത്യമായി വിവരിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. തെറ്റായ ഓഫ്‌സെറ്റുകളോ സ്ട്രൈഡുകളോ കേടായ ചിത്രങ്ങളിലേക്ക് നയിച്ചേക്കാം.
• പൊരുത്തമില്ലാത്ത പിക്സൽ ഫോർമാറ്റുകൾ: copyTo മെത്തേഡിൽ നിങ്ങൾ വ്യക്തമാക്കുന്ന പിക്സൽ ഫോർമാറ്റ് VideoFrame-ന്റെ യഥാർത്ഥ ഫോർമാറ്റുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• മെമ്മറി ലീക്കുകൾ: VideoFrame, CanvasImageBitmap ഒബ്ജക്റ്റുകൾ ഉപയോഗിച്ചതിന് ശേഷം അവ ക്ലോസ് ചെയ്ത് അടിസ്ഥാന റിസോഴ്‌സുകൾ റിലീസ് ചെയ്യുക. അങ്ങനെ ചെയ്യുന്നതിൽ പരാജയപ്പെടുന്നത് മെമ്മറി ലീക്കുകളിലേക്ക് നയിച്ചേക്കാം.
• അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ: copyTo ഒരു അസിൻക്രണസ് പ്രവർത്തനമാണെന്ന് ഓർക്കുക. പിക്സൽ ഡാറ്റ ആക്‌സസ് ചെയ്യുന്നതിന് മുമ്പ് കോപ്പി ഓപ്പറേഷൻ പൂർത്തിയായി എന്ന് ഉറപ്പാക്കാൻ await ഉപയോഗിക്കുക.
• സുരക്ഷാ നിയന്ത്രണങ്ങൾ: ക്രോസ്-ഒറിജിൻ വീഡിയോകളിൽ നിന്ന് പിക്സൽ ഡാറ്റ ആക്‌സസ് ചെയ്യുമ്പോൾ ബാധകമായേക്കാവുന്ന സുരക്ഷാ നിയന്ത്രണങ്ങളെക്കുറിച്ച് അറിഞ്ഞിരിക്കുക.

ഉദാഹരണം: YUV-ൽ നിന്ന് RGB-യിലേക്കുള്ള പരിവർത്തനം

കൂടുതൽ സങ്കീർണ്ണമായ ഒരു ഉദാഹരണം പരിഗണിക്കാം: ഒരു YUV420 VideoFrame ഒരു RGB VideoFrame-ലേക്ക് പരിവർത്തനം ചെയ്യുന്നത്. Y, U, V പ്ലെയിനുകൾ വായിക്കുക, അവയെ RGB മൂല്യങ്ങളാക്കി മാറ്റുക, തുടർന്ന് ഒരു പുതിയ RGB VideoFrame ഉണ്ടാക്കുക എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു.

ഈ പരിവർത്തനം താഴെ പറയുന്ന ഫോർമുല ഉപയോഗിച്ച് നടപ്പിലാക്കാം:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

ഇതാ കോഡ്:

asynс function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

ഈ ഉദാഹരണം VideoFrame പ്ലെയിനുകളുമായി പ്രവർത്തിക്കുന്നതിന്റെ ശക്തിയും സങ്കീർണ്ണതയും വ്യക്തമാക്കുന്നു. പിക്സൽ ഫോർമാറ്റുകൾ, മെമ്മറി ലേഔട്ട്, കളർ സ്പേസ് പരിവർത്തനങ്ങൾ എന്നിവയെക്കുറിച്ച് നല്ല ധാരണ ആവശ്യമാണ്.

ഉപസംഹാരം

WebCodecs-ലെ VideoFrame പ്ലെയിൻ API ബ്രൗസറിലെ വീഡിയോ പ്രോസസ്സിംഗിൽ ഒരു പുതിയ തലത്തിലുള്ള നിയന്ത്രണം നൽകുന്നു. പിക്സൽ ഡാറ്റ നേരിട്ട് ആക്‌സസ് ചെയ്യാനും കൈകാര്യം ചെയ്യാനും പഠിക്കുന്നതിലൂടെ, തത്സമയ വീഡിയോ ഇഫക്റ്റുകൾ, കമ്പ്യൂട്ടർ വിഷൻ, വീഡിയോ എഡിറ്റിംഗ് തുടങ്ങിയവയ്‌ക്കായി നിങ്ങൾക്ക് നൂതന ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. VideoFrame പ്ലെയിനുകൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നത് വെല്ലുവിളി നിറഞ്ഞതാണെങ്കിലും, അതിന്റെ സാധ്യതകൾ വളരെ വലുതാണ്. WebCodecs വികസിക്കുന്നത് തുടരുമ്പോൾ, മീഡിയയുമായി പ്രവർത്തിക്കുന്ന വെബ് ഡെവലപ്പർമാർക്ക് ഇത് ഒരു അത്യന്താപേക്ഷിതമായ ടൂളായി മാറുമെന്നതിൽ സംശയമില്ല.

VideoFrame പ്ലെയിൻ API ഉപയോഗിച്ച് പരീക്ഷണം നടത്താനും അതിന്റെ കഴിവുകൾ കണ്ടെത്താനും ഞങ്ങൾ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു. അടിസ്ഥാന തത്വങ്ങൾ മനസ്സിലാക്കുകയും മികച്ച രീതികൾ പ്രയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, ബ്രൗസറിൽ സാധ്യമായതിന്റെ അതിരുകൾ ഭേദിക്കുന്ന നൂതനവും മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതുമായ വീഡിയോ ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും.

കൂടുതൽ പഠിക്കാൻ

• WebCodecs-നെക്കുറിച്ചുള്ള MDN വെബ് ഡോക്സ്
• WebCodecs സ്പെസിഫിക്കേഷൻ
• GitHub-ലെ WebCodecs സാമ്പിൾ കോഡ് ശേഖരണങ്ങൾ.